<script lang="ts">
import Vue from 'vue'
import navBar from "@/components/nav-bar/nav-bar.vue";
import NoticeBar from "@/components/NoticeBar/NoticeBar.vue";
import {copyFun, getPrice, getTypeImage, isMoreThanOneDay} from "@/utils/utils";
import tips from "@/utils/tips";
import {getOrderDetail} from "@/services/order";

export default Vue.extend({
  name: "order_detail",
  components: {NoticeBar, navBar},
  data() {
    return {
      showNotice: true, // 提示
      order: {},
    }
  },
  computed: {
    lang(): any {
      return this.$t('orderDetail');
    }
  },
  onLoad(options: any) {
    console.log('----------------页面加载', options)
    this.getOrderDetailObj(options.id)
  },
  methods: {
    isMoreThanOneDay,
    copyFun,
    getTypeImage,
    getPrice,
    async getOrderDetailObj(id: number | string) {
      const orderDetail = await getOrderDetail(id)
      const {code, data} = orderDetail
      if (code === 200) {
        this.order = data
      }
      console.log(orderDetail)
    },
    onRefund() {
      const {created_at, total_amount, id} = this.order
      if (!isMoreThanOneDay(created_at)) {
        uni.navigateTo({url: `/pages/order/refund_page?total_amount=${total_amount}&order_id=${id}`})
      } else {
        tips.toast(this.otherLang.refundTimeIsExceeded)
        return;
      }
    },
    onCloseNotice() {
      this.showNotice = false
    }
  }
})
</script>

<template>
  <view>
    <nav-bar :pageTitle="lang.page_name"/>
    <view :class="['margin-20', locale]">
      <view style="height: 40rpx"/>

      <!-- 提示 -->
      <notice-bar :show="showNotice" :text="lang.notice" prompt closeable @close="onCloseNotice"/>

      <view>
        <!-- 订单详情-->
        <view class="radio-20 padding-30 bg-white gap-20 flex-column" style="margin:20rpx 0 20rpx 0">
          <view class="flex-between">
            <view class="text-36" @longpress="copyFun(order.order_number)">{{ order.order_number }}</view>
            <!-- 完成或退款-->
            <view
                :class="['text-26', 'label', order.status === 3 ? 'treat_refunded' : (order.status === 4 ? 'refunded':'')]">
              {{
                lang[order.status === 2 ? 'complete' : (order.status === 3 ? 'treat_refunded' : (order.status === 4 ? 'refunded' : ''))]
              }}
            </view>
          </view>

          <view style="background: #D4D4D4; height: 2rpx"/>

          <view class="text-32 column gap-20">
            <view class="flex-between">
              <view class="color-grey">{{ lang.merchant_name }}</view>
              <view>{{ order.store.name }}</view>
            </view>
            <view class="flex-between">
              <view class="color-grey">{{ lang.merchant_address }}</view>
              <view class="text-to" style="width: 70%">{{ order.store.address }}</view>
            </view>
            <view class="flex-between">
              <view class="color-grey">{{ lang.total }}</view>
              <view>￥{{ getPrice(order.total_amount) }}</view>
            </view>
            <view class="flex-between">
              <view class="color-grey">{{ lang.print_nums }}</view>
              <view>{{ order.page }}x{{ order.paper_count }} {{ lang.print_page }}</view>
            </view>
            <view class="flex-between">
              <view class="color-grey">{{ lang.print_time }}</view>
              <view>{{ order.created_at }}</view>
            </view>
            <view class="flex-between" @longpress="copyFun(order.store.phone)">
              <view class="color-grey">{{ lang.merchant_phone }}</view>
              <view>{{ order.store.phone }}</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 订单内容-->
      <view class="radio-20 padding-30 bg-white gap-20 flex-column" style="margin:20rpx 0 20rpx 0">
        <view class="text-36">{{ lang.print_contents }}</view>
        <view style="background: #D4D4D4; height: 2rpx"/>

        <view class="flex-between gap-20">
          <view class="flex-center gap-20">
            <view :class="['padding-30 radio-20 center type', getTypeImage(order.ext)]">
              <image :src="`/static/ext/${getTypeImage(order.ext)}.svg`" style="width: 108rpx; height: 108rpx;"/>
            </view>

            <!-- 当前打印类型-->
            <view class="flex-center wrap gap-20">
              <view class="preview-label tab-label">{{ otherLang.print_tag[order.paper_size] }}</view>
              <view v-if="order.duplex >= 2" class="preview-label tab-label">{{ otherLang.double }}</view>
              <view v-if="order.color === 2" class="preview-label tab-label">{{ otherLang.isColor }}</view>
            </view>
          </view>

          <!-- 退款-->
          <view v-if="order.status === 2" class="flex-center text-26 gap-20">
            <view :class="['tab-label', !isMoreThanOneDay(order.created_at)? 'preview-label' : '']"
                  @click.stop="onRefund" style="white-space: nowrap;">
              {{ lang.refund }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.label {
  padding: 4px 7px;
  color: #00CB5B;
  background: #F0FFED;
  border-radius: 12rpx;
}

.tab-label {
  padding: 6rpx 18rpx;
  border-radius: 12rpx;
  border: 1rpx solid #CDCDCD;
}

.resources-image {
  width: 120rpx;
  height: 120rpx;
}

.treat_refunded {
  color: #F25050;
  background: #FFEDED;
}

.refunded {
  color: #F29750;
  background: #FFF7ED;
}

.preview-label {
  color: #0186FF;
  border: 1rpx solid #0060ff;
  background: white;
}
</style>